<!-- 封装overlay、loading组件 -->
<template>
  <div>
    <van-overlay :show="isShowOverlay" z-index="10" class="overlay-style">
      <div class="wrapper" v-if="isShowLoading">
        <van-loading type="spinner" color="#1989fa" vertical>加载中...</van-loading>
      </div>
      <div class="wrapper" v-else>
        <van-empty 
          :image="errorImgUrl"
          :description="errorMessage" 
        >
          <van-button @click="goBack" type="info" class="overlay-btn-style">返回首页</van-button>
        </van-empty>
      </div>
    </van-overlay>
  </div>
</template>

<script>

export default {
  name: "overlayAk",
  props: {
    isShowOverlay: {
      type: Boolean,
      default: true,
    }, //是否启用遮罩层
    isShowLoading: {
      type: Boolean,
      default: true,
    }, //是否启用loading
    errorCode: {
      type: Number,
      default: 200,
    },
  },
  computed: {},
  data() {
    return {
      errorMessage: '',
      errorImgUrl: require('@/assets/u35.png')
    };
  },
  watch: {
    errorCode (val) {
      if (val != 200) {
        if (val == 404) {
          this.errorImgUrl = require('@/assets/u42.png')
          this.errorMessage = '未查询到相关数据'
        } else if (val == 500) {
          this.errorImgUrl = require('@/assets/u49.png')
          this.errorMessage = '服务器出错了'
        } else {
          this.errorImgUrl = require('@/assets/u35.png')
          this.errorMessage = '网络不太给力哦'
        }
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/theme.scss";
@import "@/views/workManagement/materialRequisition/materialForm.scss";
.overlay-style {
  background-color: #fff;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .overlay-btn-style {
    color: #fff;
    border-radius: 60px !important;
    padding: 30px 150px;
  }
}
</style>
